<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>数组</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			 <input type="text" v-model="fname">
			 <button @click="add">添加</button>
			 <button @click="del">删除</button>
			 <button @click="change">替换</button>
			 <button @click="update">更新</button>
			 <ul>
				 <li :key="index" v-for="(item,index) in list">{{item}}</li>
			 </ul> 
			 <button @click="addPro">添加属性</button>
			 <p>
				  <span>{{obj.id}}</span>
				  <span>{{obj.username}}</span>
				  <span>{{obj.age}}</span>
				  <span>{{obj.gender}}</span>
			 </p>
		</div>
		<script>
			let vm=new Vue({
				el:'#app',
				data:{
					fname:"",
					list:['first','second','thrid'],
					obj:{id:1001,username:'haoren',age:18}
				},
				methods:{
					add:function(){
						this.list.push(this.fname);
					},
					del:function(){
						this.list.pop();//删除数组中的最后一个数据
					},
					change:function(){
						//slice方法返回一个新的数组对象
						this.list=this.list.slice(0,2);
					},
					update:function(){
						//通过下标对象数据直接进行更新无法实现响应式的效果
					    //this.list[0]=this.fname;
						//通过Vue中的set方法来实现响应式的效果.
						Vue.set(this.list,0,this.fname);
					},
					addPro:function(){
						//对对象进行属性的扩展,无法实现响应式的效果
						//this.obj.gender='F';
						//vue.set(target,新增的属性名称,值)
						Vue.set(this.obj,'gender','F');
					}
				}
			});
		</script>
	</body>
</html>
